import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { intl } from '../../../intl/intl'
import { formatContractPriceDecimal, formatDecimal, formatValue } from '../../../utils/dataUtils'

import wsHOC from '../../common/wsHOC'
import themeHOC from '../../common/themeHOC'
import Document from '../../../component/document/Document'
import Select from '../../../component/select/Select'

import { queryContractInfo, setContract, subscribeMarket, unsubscribeMarket } from '../../../redux/actions/tradeMarketAction'

import './market.less'

@connect(state => {
  return {
    contractList: state.trade.market.get('contractList'),
    currentContract: state.trade.market.get('currentContract'),
    market: state.trade.market.get('market'),
    showDealDetail: state.trade.dealDetail.get('showDealDetail')
  }
}, dispatch => {
  return bindActionCreators({
    queryContractInfo, setContract, subscribeMarket, unsubscribeMarket
  }, dispatch)
})
@wsHOC(props => {
  props.subscribeMarket(props.currentContract)
}, props => {
  props.unsubscribeMarket(props.currentContract)
})
@themeHOC
class Market extends Component {
  componentDidMount () {
    this.props.queryContractInfo()
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    const { currentContract, subscribeMarket, unsubscribeMarket } = this.props
    if (formatValue(prevProps.currentContract, 'InstrumentID') !== formatValue(currentContract, 'InstrumentID')) {
      unsubscribeMarket(prevProps.currentContract)
      subscribeMarket(currentContract)
    }
  }

  render () {
    const { theme, currentContract, contractList, market, showDealDetail, setContract } = this.props
    const contractName = formatValue(currentContract, 'InstrumentName')
    const change = market.get('Change')
    const close = formatValue(showDealDetail.get(0), 'Price')
    const upLow = change > 0 ? 'up' : change < 0 ? 'low' : ''
    return (
      <Document title={`${contractName} $${close}`}>
        <div className={`trade-market-${theme}`}>
          <Select
            className="trade-market-select"
            textContainerClassName="trade-market-select-text-container"
            theme={theme}
            value={contractName}
            dataSource={contractList}
            showKey="InstrumentName"
            onDataSelected={setContract}/>
          <span
            datatype={upLow}
            className="trade-market-last-price">
            {formatContractPriceDecimal(currentContract, close)}
          </span>
          <div className="trade-market-item">
            <span>{intl('today_change')}</span>
            <span
              datatype={upLow}
              className="trade-market-item-value">
              {change || change === 0 ? `${change > 0 ? '+' : ''}${change.toFixed(2)}%` : '--'}
            </span>
          </div>
          <div className="trade-market-item">
            <span>{intl('today_high_price')}</span>
            <span
              className="trade-market-item-value">
              {formatContractPriceDecimal(currentContract, formatValue(market, 'HighestPrice'))}
            </span>
          </div>
          <div className="trade-market-item">
            <span>{intl('today_low_price')}</span>
            <span className="trade-market-item-value">
              {formatContractPriceDecimal(currentContract, formatValue(market, 'LowestPrice'))}
            </span>
          </div>
          <div className="trade-market-item">
            <span>{intl('twenty_four_hours_trading_volume')}</span>
            <span className="trade-market-item-value">
              {formatDecimal(formatValue(market, 'Volume'))}
            </span>
          </div>
          <div className="trade-market-item">
            <span>{intl('twenty_four_hours_trading_turnover')}</span>
            <span className="trade-market-item-value">
              {formatContractPriceDecimal(currentContract, formatValue(market, 'Turnover'))}
            </span>
          </div>
          <div className="trade-market-item">
            <span>{intl('twenty_four_hours_positions')}</span>
            <span className="trade-market-item-value">
              {formatDecimal(formatValue(market, 'OpenInterest'))}
            </span>
          </div>
        </div>
      </Document>
    )
  }
}

export default Market
